<template>
  <view class="investigate-content myform">
    <uni-forms
      :value="formData"
      ref="form"
      validate-trigger="bind"
      err-show-type="undertext"
    >
      <!-- 基本信息 -->
      <view class="form-cont">
        <view class="max-title" @click="changeDisplay"
          >基本信息<img
            :class="!basicShow ? 'rotate' : ''"
            src="https://szgd-dev.tgovcloud.com/public/images/arr-down.png"
        /></view>
        <view class="basic-info" v-show="basicShow">
          <!-- 顶部个人信息 -->
          <view class="investigate-info">
            <view v-for="item in investigateInfo" :key="item.name">
              <view class="name" >{{ item.name }}</view>
              <view class="value" v-if="item.prop=='cardType'"  >{{ personInfo[item.prop] | cardTypeFilter }}</view>
              <view class="value" v-else-if="item.prop=='gender'">{{personInfo[item.prop] | genderFilter}}</view>
              <view class="value" v-else>{{ personInfo[item.prop] || '-' }}</view>
            </view>
          </view>
        </view>
        <view class="divi-bar"></view>
        <view
          class="medical-history"
          v-for="(formItem, k) in formInfo"
          :key="k"
        >
          <view class="main-tit">
            <view class="sub-title">{{ formItem.title }}</view>
            <view class="wp">
              <view v-if="formItem.subBtn"  class="check-no" @click="checkNo(formItem.subBtnValue)">{{
                formItem.subBtn
              }}</view>
            </view>
          </view>
          <view
            v-for="(item, key) in formItem.children"
            class="flex-box"
            :key="key"
          >
            <view>
              <text v-if="item.index">{{ item.index }}.</text>
              {{ item.label }}
              <view v-if="item.required" class="required">*</view>
            </view>

            <view v-if="item.type == 'radio'" class="cr-style-1" :class="{'width100p':item.className=='width100p'}" >
              <uni-data-checkbox
                v-model="item.radioValue"
                :localdata="item.radioArray"
                @change="checkboxChange($event, item)"
              ></uni-data-checkbox>
            </view>

            <view class="cb-style-1"  
              :class="{'col-2': item.className=='col-2'}"
               v-if="item.type == 'checkbox'">
              <uni-data-checkbox
                multiple
                v-model="item.checkboxValue"
                :localdata="item.checkboxArray"
                @change="checkboxChange($event, item)"
              ></uni-data-checkbox>
            </view>

            <view v-if="item.hasInputFrame && item.isShowInput   " class="my-input-style"  >
                <textarea  maxlength='400'
                  placeholder-class="p-hold-cl"
                  auto-height="true"
                  placeholder="请输入" v-model="item.inputValue" />
            </view>

            <view v-if="item.type == 'textarea'" class="my-input-style">
              <textarea  maxlength='400'
                placeholder-class="p-hold-cl"
                auto-height="true"
                placeholder="请输入" v-model="item.inputValue" />

            </view>

            <view class="date-style"  v-if="item.type==='date'"  >
              <picker
                mode="date"
                :value="item.dateValue"
                @change="bindDateChange($event, item)"
              >
                <view class="date-show"
                  >{{ item.dateValue }}
                </view>
              </picker>
              &nbsp;&nbsp;
              <picker
                mode="time"
                :value="item.timeValue"
                @change="bindTimeChange($event, item)"
              >
                <view class="date-show"
                  >{{ item.timeValue }}
                </view>
              </picker>
            </view>

            <view class="divi-btm"></view>
            
          </view>
          <view class="divi-bar"></view>

        </view>
      </view>
      <button class="btn" @click="submitAll">
        <text style="color: #fff">提交</text>
      </button>
    </uni-forms>
  </view>
</template>

<script>
import { cardTypes, genderArray } from "@/data";
import { investigateInfo, formInfo } from "./formConfig";
import dayjs from "dayjs";

function cpyFunc(obj, f) {
  try {
    return JSON.parse(JSON.stringify(obj));
  } catch (error) {
    console.log("cuole====", error);
  }
}
export default {
  data() {
    return {
      formInfo: cpyFunc(formInfo),
      investigateInfo: cpyFunc(investigateInfo),
      formData: {
        otherDiseases: ""
      },
      // 个人信息
      basicShow: false,
      personInfo: {},
    };
  },

  filters: {
    cardTypeFilter(value) {
      const typeObj = cardTypes.find(obj => obj.value === value);
      return typeObj ? typeObj.label : '';
    },

    genderFilter(value){
      const typeObj = genderArray.find(obj => obj.value == value);
      return typeObj ? typeObj.label : '-';
    },
  },

  onLoad(e) {

    this.personInfo=uni.getStorageSync('personInfo')||{}
    // 初始化巡诊时间
    try {
      if(this.formInfo){
        this.formInfo[3]['children'][0].dateValue = dayjs().format('YYYY-MM-DD')
        this.formInfo[3]['children'][0].timeValue = dayjs().format('HH:mm')
        console.log('初始化巡诊时间===', this.formInfo[3]['children'][0].timeValue)
      } 
      
    } catch (error) {
      console.log('初始化巡诊时间error===', error)
    }
  },

  onShow(){
  },

  methods: {
    
    checkNo(value) {
      console.log('checkNo===', value)
      if (value == void 0) return;
      this.formInfo.forEach(item => {
        item.children.forEach(ele => {
          let propName=ele.type + 'Value';
          if(propName=='checkboxValue'){
            ele[propName]=ele[propName]||[]
            let len=ele[propName].length;
            ele[propName].splice(0, len, value);
            ele.isShowInput=false;
            ele.inputValue='';
            ele.lastCheckboxValue= [...ele.checkboxValue]  // 赋值保存
          }else if(propName=='radioValue'){
            if(ele.prop=='yyqk'){
              ele.radioValue=0
            }else {
              ele[propName]=value;
            }
          }
        })
      })
    },
    
    changeDisplay() {
      this.basicShow = !this.basicShow;
    },

    validFn(list){
      const {invalid} = this;
      let msgObj={
        flag: true, // 
        label: '',
        type: '',
      }

      outerloop:
      for(let i=0;i<list.length;i++) {
        let item=list[i],children=item.children;
        for(let k=0;k<children.length;k++){
          let row=children[k];
          let propName=row.type + 'Value';
          if(row.required && invalid(row[propName]) ) {
            msgObj.flag=false;
            msgObj.label=row['label']
            msgObj.type=row['type']
            break outerloop;
          }
        }
      }
      return msgObj;
    },

    invalid(val){
      if(Array.isArray(val)) {
        return val.length==0
      }else {
        return val==void 0 || val==='' || val===null;
      }
    },

    bindDateChange(ev, row){
      console.log(ev)
      row.dateValue=ev.detail.value
    },

    bindTimeChange(ev, row){
      console.log(ev)
      row.timeValue=ev.detail.value;
    },
    
    submitAll() {
      // 校验
      let validObj=this.validFn(this.formInfo);
      console.log('validObj====', validObj)
      if(!validObj.flag){
        let prefix='',type=validObj.type;
        if(type=='checkbox'||type=='radio'||type=='date'){
          prefix='请选择';
        }else if(type=='textarea') {
          prefix='请输入';
        }
        
        uni.showToast({
          title: prefix + validObj.label,
          duration: 3000,
          icon: 'none'
        })
        return
      }

      uni.setStorage({
        key: 'psychologicalInspectionData',
        data: this.formInfo
      })
      let url='/packageAlpha/pages/psychologicalInspection/confirmPage'
      uni.navigateTo({
        url
      })
    },

    checkboxChange(ev, row){
      console.log('checkboxChange====', JSON.parse(JSON.stringify(ev)))
      console.log('checkboxChange====', row)
      let val=ev.detail.value;
      if(row.type==='checkbox'){
        // 选择“正常”/“无”，剩下选项不选
        if(this.addIsNormal(row.checkboxValue, row.lastCheckboxValue)) {
          row.checkboxValue.splice(0, val.length, 1)
          row.isShowInput=false;
          row.inputValue='';
        }else {
          if(row.checkboxValue.indexOf(1)!=-1) {
            row.checkboxValue = row.checkboxValue.filter(i => i!=1)
          }
          // 选择其他
          row.isShowInput = this.isQt(ev.detail.data)
          if(!row.isShowInput) row.inputValue=''
        }

      }else {
        // radio
        if(row.prop=='yxjz'){
          val==2 ?  row.isShowInput=true : row.isShowInput=false,row.inputValue='';  // 行为举止
        }
        if(row.prop=='yyqk'){
          val==1 ? row.isShowInput=true : row.isShowInput=false,row.inputValue='';  // 有无用药情况
        }
      }

      row.lastCheckboxValue= [...row.checkboxValue]  // 赋值保存

      this.$nextTick(()=>{
        this.$forceUpdate()
      })
    },

    // 选中项是否为“正常/无”
    addIsNormal(sel, lastSel){
      // 选中
      if(sel.length > lastSel.length) {
        let [select]=sel.filter(n => {
          return lastSel.indexOf(n)==-1
        })
        if(select==1) return true;
      }
      return false
    },

    isQt(arr) {
      return arr.some(ele => {
        return ele.text=='其他';
      })
    },

  }
};
</script>

<style lang="scss">
.investigate-content {
  display: flex;
  flex-direction: column;

  .jizheng-form {
    display: flex;
    justify-content: space-between;
  }

  .form-cont {
    background: #fff;
  }

  .title {
    font-size: 40rpx;
    color: #000000;
    font-weight: bold;
  }

  .sub-title {
    font-size: 40rpx;
    font-family: PingFang SC;
    font-weight: 600;
    color: #000000;
  }

  .max-title {
    font-size: 40rpx;
    color: #000000;
    font-weight: 600;
    height: 98rpx;
    line-height: 98rpx;
    background: #fff;
    border-bottom: 1rpx solid #e5e5e5;
    padding: 0 32rpx;
    position: relative;
    display: flex;
    justify-content: space-between;

    & ~ .basic-info {
      margin-top: 0;
    }

    img {
      width: 26rpx;
      height: 15rpx;
      position: absolute;
      right: 38rpx;
      top: 50%;
      transform: translateY(-50%);
      transition: all 0.5s;

      &.rotate {
        transform: rotate(-90deg);
        transition: all 0.5s;
      }
    }

    .check-no{
      color: #53adf3;
      font-size: 30rpx;
      display: inline-block;
    }

    .check-no {
      margin-right: 76rpx;
    }

     
  }

  .main-tit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 98rpx;
    box-sizing: border-box;
    border-bottom: 1px solid #E5E5E5;
    padding: 0 32rpx;
    
    .check-no{
      height: 60rpx;
      font-size: 30rpx;
      text-align: center;
      font-family: PingFang SC;
      font-weight: 500;
      background: #2C9AF1;
      border-radius: 5px;
      width: 210rpx;
      line-height: 60rpx;
      color: #fff;
    }
  }
  .divi-btm {
    width: 100%;
    background-color: #e5e5e5;
    height: 1rpx;
  }
  .investigate-info {
    font-size: 30rpx;
    background: #fff;
    .name {
      font-size: 30rpx;
      font-family: PingFang SC;
      color: #999999;
    }
    .value {
      font-size: 34rpx;
      font-family: PingFang SC;
      font-weight: 500;

      color: #666666;
    }
  }
  .divi-bar {
    background-color: #F9F9F9;
    width: 100vw;
    height: 30rpx;
  }
  .investigate-info > view {
    display: flex;
    justify-content: space-between;
    // padding: 18rpx 0;
    height: 96rpx;
    line-height: 96rpx;

    // border-bottom: 1rpx solid #e5e5e5;
  }

  .investigate-info view view:first-child {
    color: #999999;
  }

  .investigate-info view view:last-child {
    color: #000000;
    font-size: 32rpx;
  }

  .basic-info {
    font-size: 30rpx;
    background: #fff;
    padding: 0 32rpx 30rpx;
    // margin: 30rpx 0;
    overflow: hidden;

  }

  .medical-history {
    background: #fff;
    // padding: 0 32rpx;

    .uni-data-checklist {
      margin: 20rpx 0;
    }

    .required {
      display: inline-block;
      color: red;
      margin-left: 10rpx;
    }
  }

  .lettle-title {
    font-size: 40rpx;
    font-weight: 600;
    line-height: 98rpx;
    height: 98rpx;
  }

  .input-style {
    font-size: 24rpx;
    margin-top: 20px;
    border-bottom: 1rpx solid #e4e4e4;
  }

  .flex-box {
    font-size: 26rpx;
    display: flex;
    justify-content: space-between;
    color: #333333;
    flex-wrap: wrap;
    padding: 0 32rpx;
    &:nth-last-child(2){
      .divi-btm {
        display: none;
      }
    }
    & > view {
      line-height: 100rpx;
    }

    text {
      font-size: 26rpx;
    }

    .my-input-style {
      height: auto;
      width: 100%;
      padding-bottom: 20rpx;
      .p-hold-cl  {
        font-size: 24rpx;
        font-family: PingFang SC;
        color: #CCCCCC;
        font-weight: 400;
        line-height: 32rpx;
      }
      &>textarea {
        min-height: 44rpx;
        line-height: 40rpx;
        font-size: 28rpx;
        width: 100%;
        height: initial;
      }
    }
    
  }

  .picker-control {
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    color: #333333;
    margin-bottom: 10rpx;

    &-title {
      font-weight: 500;
      font-size: 26rpx;

      &-picker {
        margin-top: 20rpx;
        padding: 20rpx 20rpx;
        text-align: center;
        border: 1px solid #f2f2f2;
        border-radius: 8rpx;

        &-date {
          border-left: 0;
          border-right: 0;
          border-top: 0;
          border-bottom: 1px solid #f2f2f2;

          .uni-input {
            line-height: 80rpx;
          }
        }

        .uni-input {
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 26rpx;
        }
      }
    }

    .picker-content-text {
      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.16);
      border-radius: 6px;
      position: relative;
      padding-left: 40rpx;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      padding-right: 48rpx;
      .picker-content-img {
        width: 26rpx;
        height: 15rpx;
        background: url("https://szgd-dev.tgovcloud.com/public/images/arr-down.png")
          no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 30rpx;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }

  .btn {
    width: 686rpx;
    height: 94rpx;
    background: #2c9af1;
    border-radius: 16rpx;
  }

  .small-title {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #000000;
    padding: 40rpx 0 0 0;
  }

  .investigate-group {
    .uni-group {
      margin-top: 0 !important;
    }

    .uni-group__content {
      padding: 0;
    }
  }

  .vaccination-wrapper {
    .label {
      font-size: 30rpx;
      font-weight: bold;
      color: #000000;
      padding: 40rpx 0 0 0;
      margin-bottom: 20rpx;
    }

    .flex-box {
      width: 100%;
    }

    .vaccination-content {
      width: 100%;

      & > view {
        margin-bottom: 30rpx;
      }

      .vaccination-title {
        height: 60rpx;
      }
    }

    .vaccination-select {
      border-bottom: 1px solid #e5e5e5;
    }
  }

  .picker-content-text {
    height: 90rpx;
    line-height: 90rpx;
  }

  .epidemiology-his {
    /deep/ .uni-forms-item__inner {
      margin: 0;
    }

    padding-bottom: 20rpx;
  }

  .mood-form {
    padding-bottom: 20rpx;

    /deep/ .uni-forms-item__inner:last-child {
      margin: 0;
    }
  }
  .my-popup-box {
    background-color: #fff;
    border-radius: 20rpx;
    margin: 0 40rpx;
    max-width: 600rpx;
    .my-popup-title {
      color: #000;
      padding: 40rpx 30rpx 20rpx;
      font-weight: bold;
      font-size: 34rpx;
    }
    .my-popup-content {
      color: #666;
      padding: 20rpx 30rpx 30rpx;
      font-size: 32rpx;
      .icon {
        vertical-align: middle;
        margin-right: 16rpx;
      }
      .text {
        vertical-align: middle;
      }
    }
    .my-popup-handler {
      display: flex;
      border-top: 1px solid #f5f5f5;
      font-weight: 500;
    }
    .my-popup-handler__item {
      width: 50%;
      box-sizing: border-box;
      color: #000;
      font-size: 36rpx;
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      &.confirm {
        border-left: 1px solid #f5f5f5;
        color: #2c9af1;
      }
    }
    .text-warn {
      color: #df6434;
    }
  }
  
  .cb-style-1 {
    width: 100%;
    /deep/ .uni-data-checklist .checklist-group .checklist-box  {
      min-width: 28%;
      margin-right: 10rpx;
      box-sizing: border-box;
      .checklist-text {
        font-size: 26rpx!important;
        color: #333333;
        font-weight: 500;
        font-family: PingFang SC;
      }
    }
  }
  .cr-style-1 {
    /deep/ .uni-data-checklist .checklist-group .checklist-box  {
      min-width: 28%;
      margin-right: 10rpx;
      box-sizing: border-box;
      .checklist-text {
        font-size: 26rpx!important;
        color: #333333;
        font-weight: 500;
        font-family: PingFang SC;
      }
    }
  }
  .width100p {
    width: 100%;
  }
  .col-2 {
    /deep/ .uni-data-checklist .checklist-group .checklist-box  {
      min-width: 46%;
      margin-right: 10rpx;
      box-sizing: border-box;
    }
  }
  .date-style {
    width: 100%;
    line-height: 60rpx!important;
    display: flex;
    .date-show {
      margin-right: 1em;
      min-width: 140rpx;
    }
  }
}
</style>
